<template>
	<view class="container d-flex flex-column">
		<view class="flex-fill form">
			<list-cell :hover="false">
				<view class="form-input w-100 d-flex align-items-center">
					<view class="label">头像</view>
					<view class="input flex-fill">
						<view class="form-input w-100 d-flex align-items-center"  style="position: relative;">
							<view class="u-flex user-box">
								<view class="u-m-r-10">
									<u-avatar :src="member.avatar" size="140"></u-avatar>
								</view>
							</view>
						</view>
					</view>
				</view>
				
			</list-cell>
			<list-cell :hover="false">
				<view class="form-input w-100 d-flex align-items-center">
					<view class="label">昵称</view>
					<view class="input flex-fill">
						<input type="nickname" placeholder="请填写昵称" placeholder-class="text-color-assist font-size-base" 
						v-model="member.username">
					</view>
				</view>
			</list-cell>
			<list-cell :hover="false">
				<view class="form-input w-100 d-flex align-items-center" style="position: relative;">
					<view class="label">手机号码</view>
					<view class="input flex-fill">
						<input type="number" placeholder="请填写手机号" maxlength="11"
						v-model="member.mobile">
					</view>
				</view>
			</list-cell>
			<list-cell :hover="false">
				<view class="form-input w-100 d-flex align-items-center">
					<view class="label">性别</view>
					<view class="input flex-fill">
						<view class="radio-group">
							<view class="radio" :class="{'checked': member.gender == '0'}" style="margin-right: 10rpx;" @tap="member.gender=0">先生</view>
							<view class="radio" :class="{'checked': member.gender == '1'}" @tap="member.gender=1">女士</view>
						</view>
					</view>
				</view>
			</list-cell>

		</view>
		<view class="btn-box d-flex align-items-center just-content-center">
			<button type="primary" class="save-btn" @tap="save">保存</button>
		</view>
	</view>
</template>

<script>
	
	import listCell from '@/components/list-cell/list-cell'
	import { mapState } from 'vuex';
	export default {
		components: {
			listCell
		},
		data() {
			const currentDate = this.getDate({format: true})
			return {
				member: {},
				date: currentDate
			}
		},
		computed: {
			...mapState(['openid', 'lang']),
			startDate() {
				return this.getDate('start');
			},
			endDate() {
				return this.getDate('end');
			}
		},
		onLoad() {
			this.member = this.$store.state.member;
			console.log(this.member);
		},
		methods: {
			chooseavatar(e) {
				const that = this;
				uni.uploadFile({
					url: this.$u.http.config.baseUrl + '/api/common/upload', 
					filePath: e.detail.avatarUrl,
					name: 'file',
					header: {
						token: this.member.token,
						lang: this.lang,
						'content-type': 'application/x-www-form-urlencoded;charset=UTF-8'
					},
					success(uploadFileResult){
						if (uploadFileResult) {
							const upload = JSON.parse(uploadFileResult.data);
							that.member.avatar = upload.data.fullurl;
						}
					}, 
					fail(e){
						console.log('网络链接错误');
						console.log(e)
					}
				});
			},
			async getPhoneNumber(e) {
				if (e.hasOwnProperty('detail')) {
					let data = await this.$u.api.userDecryptData({
						encryptedData: e.detail.encryptedData,
						iv: e.detail.iv,
						openid: this.openid
					});
					if (data) {
						this.member.mobile = data.phoneNumber;
					}
				}
			},
			getDate(type) {
				const date = new Date();
				let year = date.getFullYear();
				let month = date.getMonth() + 1;
				let day = date.getDate();
	
				if (type === 'start') {
					year = year - 60;
				} else if (type === 'end') {
					year = year + 2;
				}
				month = month > 9 ? month : '0' + month;;
				day = day > 9 ? day : '0' + day;
				return `${year}-${month}-${day}`;
			},
			handleDateChange(e) {
				this.member.birthday = e.target.value
			},
			async save() {
				console.log('Current member:', this.member);
				console.log('Store member token:', this.$store.state.member.token);
				
				let data = await this.$u.api.userEdit({
					username: this.member.username,
					nickname: this.member.username, 
					mobile: this.member.mobile,
					gender: this.member.gender,
					avatar: this.member.avatar,
				});
				if (data) {
					const updatedMember = {
						...this.$store.state.member,
						username: this.member.username,
						nickname: this.member.nickname,
						mobile: this.member.mobile,
						gender: this.member.gender,
						avatar: this.member.avatar,
						token: this.$store.state.member.token
					}
					this.$store.commit('SET_MEMBER', updatedMember)
					uni.showToast({
						title: '保存成功',
						icon: 'success'
					})
					setTimeout(() => {
						uni.navigateBack()
					}, 1500)
				}
				
			}
		}
	}
</script>

<style lang="scss" scoped>
page {
	height: 100%;
}

.container {
	padding: 20rpx 30rpx;
}

.form {
	border-radius: 8rpx;
}

.form-input {
	.label {
		width: 160rpx;
		font-size: $font-size-base;
		color: $text-color-base;
	}
	
	.input {
	}
	
	.radio-group {
		display: flex;
		justify-content: flex-start;
		
		.radio {
			padding: 10rpx 30rpx;
			border-radius: 6rpx;
			border: 2rpx solid $text-color-assist;
			color: $text-color-assist;
			font-size: $font-size-base;
			
			&.checked {
				background-color: #289365;
				color: $text-color-white;
				border: 2rpx solid #289365;
			}
		}
	}
}

.btn-box {
	height: calc((100vh - 40rpx) / 2);
}

.save-btn {
	width: 90%;
	border-radius: 50rem !important;
	font-size: $font-size-lg;
}
</style>
